<template>
  <div>
    <div class="top"> 
      <div >

        <div class="second">
          <!-- 当前币种价格 -->
          <div class="secondLeft">
            <div @click="showCurrencySelector = true" style="display: flex;align-items: center; cursor: pointer;">
              <div class="fw-bold" style="font-family: '微软雅黑'; font-size: 16px;color: #000;">{{ coinInfo.coinUpperCase }}</div>
              <img src="@/assets/defi/ko.png" alt="" style="margin-left: 5px; width: 10px;height: 10px;">
            </div>
            <div
              style="font-size: 30px;margin-top: 5px;"
              :class="[_isRFD(coinPriceInfo.openPrice, coinPriceInfo.close, 'buy', 'rise'), ' fw-num']"
            >
              {{ coinPriceInfo.close || '0.00' }}
            </div>
            <div
              style="margin: 0;"
              :class="[ 
                _isRFD(coinPriceInfo.openPrice, coinPriceInfo.close, 'buy', 'rise'),
                'secondLeftB fw-num'
              ]"
            >
              {{ coinPriceInfo?.priceChangePercent }}%
            </div>
          </div>
          <div class="secondRight">
            <!-- 高 -->
            <div class="secondItem">
              <!-- {{ _t18(`k_hight`, ['ebc']) }} -->
              <div class="itemL">24h{{ _t18('ebc_k_hight') }}</div>
              <div class="itemR fw-num" v-if="coinPriceInfo?.high24" style="color: #000;">
                {{ priceFormat(coinPriceInfo.high24) }}
              </div>
              <div class="itemR fw-num" v-else style="color: #000;">
                {{ priceFormat(tradeStore.klineTicker.highPrice || 0) }}
              </div>
            </div>
            <!-- 低 -->
            <div class="secondItem">
              <!-- <div class="itemL">{{ _t18(`k_low`, ['ebc']) }}</div> -->
              <div class="itemL">24h{{ _t18('ebc_k_low') }}</div>
              <div class="itemR fw-num" v-if="coinPriceInfo?.low24" style="color: #000;">
                {{ priceFormat(coinPriceInfo.low24) }}
              </div>
              <div class="itemR fw-num" v-else style="color: #000;">
                {{ priceFormat(tradeStore.klineTicker.lowPrice || 0) }}
              </div>
            </div>
            <!-- 量 -->
            <div class="secondItem">
              <!-- <div class="itemL">{{ _t18(`k_quantity`) }}</div> -->
              <div class="itemL">24h{{ _t18('vol') }}</div>
              <div class="itemR fw-num" v-if="coinPriceInfo?.volume24" style="color: #000;">
                {{ countFormat(coinPriceInfo.volume24) }}
              </div>
              <div class="itemR fw-num" v-else style="color: #000;">
                {{ countFormat(tradeStore.klineTicker.volume || 0) }}
              </div>
            </div>
            <!-- 24h成交额 -->
            <div class="secondItem">
              <!-- <div class="itemL">{{ _t18(`k_quantity`) }}</div> -->
              <div class="itemL">24h{{ _t18('12_chengjiao') }}</div>
              <div class="itemR fw-num" v-if="coinPriceInfo?.volume24" style="color: #000;">
                {{ countFormat(coinPriceInfo.volume24) }}
              </div>
              <div class="itemR fw-num" v-else style="color: #000;">
                {{ countFormat(tradeStore.klineTicker.volume || 0) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 币种选择器 -->
    <CurrencySelector 
      v-model:show="showCurrencySelector"
      :title="t('quote')"
      @select="handleCurrencySelect"
    />
  </div>
</template>
<script setup>
import { useTradeStore } from '@/store/trade'
import { countFormat, priceFormat } from '@/utils/decimal'
import { _t18 } from '@/utils/public'
import { useMainStore } from '@/store/index.js'
import { onMounted, ref } from 'vue'
import CurrencySelector from '@/components/CurrencySelector/index.vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n() // ✅ 替代 _t18，安全可在函数中使用

const mainStore = useMainStore()

const props = defineProps({
  coinInfo: {
    type: Object,
    default: () => {}
  }
})

const coinCollect = ref()
const showCurrencySelector = ref(false)

onMounted(() => {
  coinCollect.value = props.coinInfo.isCollect === 2 ? false : true
})
watch(
  () => props.coinInfo.coin,
  () => {
    coinCollect.value = props.coinInfo.isCollect === 2 ? false : true
  },
  { deep: true }
)
/**
 * 黄金白银取值
 */

const tradeStore = useTradeStore()
// 修改后（增加深度响应）
// 修改计算属性，强制依赖K线数据
// const coinPriceInfo = computed(() => {
//   // 直接使用klineTicker数据覆盖
//   const klineData = tradeStore.klineTicker

//   return {
//     showSymbol: props.coinInfo.showSymbol,
//     close: klineData.closePrice || 0,
//     openPrice: klineData.openPrice || 0,
//     high24: klineData.highPrice || 0,
//     low24: klineData.lowPrice || 0,
//     // 实时计算涨跌幅
//     priceChangePercent:
//       klineData.closePrice && klineData.openPrice
//         ? (((klineData.closePrice - klineData.openPrice) / klineData.openPrice) * 100).toFixed(2)
//         : '0.00'
//   }
// })

const coinPriceInfo = computed(() => {
  return tradeStore.allCoinPriceInfo[props.coinInfo.coin] || {}
})
// 添加事件强制同步
const forceSync = () => {
  tradeStore.klineTicker = { ...tradeStore.klineTicker }
}

// 高频更新绑定（每200ms检查一次）
onMounted(() => {
  const timer = setInterval(forceSync, 200)
  onBeforeUnmount(() => clearInterval(timer))
})
const emits = defineEmits(['showSidePopup', 'currencySelect'])

// 处理币种选择
const handleCurrencySelect = (currency) => {
  emits('currencySelect', currency)
}

// 点击收藏按钮
const setCollectByCoin = () => {}
</script>
<style lang="scss" scoped>
.hightItem {
  color: var(--ex-active-font-color) !important;
}
.top {
  padding: 10px 15px 0;
  z-index: 9;
  background-color: var(--ex-default-background-color);
  .first {
    display: flex;
    justify-content: space-between;
    .firLeft {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: var(--ex-default-font-color);
      .firLeftImg {
        width: 17px;
        height: 14px;
        margin-right: 10px;
      }
      .firNum {
        font-size: 14px;
        margin-left: 10px;
      }
    }
    .senLeftImg {
      margin-left: 10px;
      display: block;
      width: 24px;
      height: 24px;
    }
  }
  .second {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 10px;
    .secondLeft {
      font-size: 36px;
      font-weight: bold;
      color: var(--ex-font-color10);
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      height: 80px;
      > * {
        transition: 0.3s;
      }
      .secondLeftB {
        font-size: 14px;
        margin-top: 5px;
      }
    }
    .secondRight {
      display: grid;
  grid-template-columns: repeat( 2 , 1fr); /* 一行 3 列 */ 
  gap: 0 50px;
      .secondItem { 
        padding: 6px 0;
        font-size: 14px; 
        text-align: right;
        .itemL {
          color: var(--ex-passive-font-color); 
          font-size: 12px;
          color: #999;
        }

        .itemR {
          color: var(--ex-default-font-color);
          margin-top: 3px;
        }
      }
    }
  }
  .third {
    margin-top: 20px;
    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .thirdLeft {
        display: flex;
        font-size: 14px;
        color: var(--ex-default-font-color);
        .item {
          margin-right: 30px;
        }
      }
      .thirdRight {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: var(--ex-font-color9);
        .thirdRightImg {
          width: 10px;
          height: 6px;
          margin-left: 5px;
        }
      }
    }
  }
}
.selectTimes {
  position: fixed;
  height: 100vh;
  width: var(--ex-max-width);
  background: rgba($color: #000000, $alpha: 0.6);
  z-index: 10;
  .times {
    background-color: var(--ex-default-background-color);
    position: absolute;
    width: 100%;
    height: 84px;
    display: flex;
    align-items: center;
    border-radius: 0px 0px 15px 15px;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 15px;
      width: 37px;
      height: 23px;
      background: var(--ex-div-bgColor12);
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: var(--ex-default-font-color);
    }
  }
}
</style>
